<style>
    @import '~vux/dist/vux.css';

    .weui_cells.vux-no-group-title {
        margin-top: 0;
    }

    .content-header {
        height: 46px;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 100;
    }

    html, body, #app {
        height: 100%;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: subpixel-antialiased;
        text-rendering: optimizeLegibility;
    }

    body {
        background-color: #efeff4;
    }

    .expand-transition {
        max-height: 100%;
        transition: all .3s ease;
    }

    .expand-enter {
        max-height: 0;
        opacity: 0;
    }

    .expand-leave {
        max-height: 0;
        opacity: 0;
    }

    .fade-transition {
        transition: all .3s ease;
    }
    .fade-enter, .fade-leave {
        opacity: 0;
        transform: translate3d(10px, 0, 0);
    }

</style>

<template>
    <div>
        <x-header
         class="content-header"
         v-show="!header.disable"
         :left-options="{showBack: header.show_back, backText: header.back_text, preventGoBack: header.prevent_go_back}"
         :right-options="{showMore: header.show_more}"
         @on-click-back="header.on_click_back"
         @on-click-more="header.on_click_more" >
            <a slot="left">{{{ header.left_slot }}}</a>
            {{{header.slot}}}
            <a slot="right">{{{ header.right_slot }}}</a>
        </x-header>
        <router-view
         class="router-content"
         keep-alive>
        </router-view>

        <alert :show.sync="show_error" title="错误" button-text="确定" >
            <p style="text-align:center">{{ error_text }}</p>
        </alert>

        <loading :show="show_loading"></loading>
    </div>
</template>

<script>
    import XHeader from 'vux-components/x-Header'
    import Alert from 'vux-components/alert'
    import Loading from 'util-components/loading.vue'

    import store from './vuex/store'
    import actions from './vuex/actions'
    import Vue from 'vue'

    import ShopType from './shop-type'

    export default {
        data: () => ({
            show_error: false,
            show_loading: false,
            error_text: '',
        }),
        ready () {
            Vue.http.interceptors.push({
                request: (request) => {
                    this.show_loading = true;
                    request.params.shop = this.shop;

                    if (request.data) {
                        request.data.shop = this.shop
                    }
                    return request;
                },

                response: (response) => {
                    response.success = true;
                    this.show_loading = false;

                    if (response.status < 200 || response.status > 400) {
                        this.show_error = true;
                        this.error_text = response.status === 500? response.data: response.statusText;

                    } else if (response.data.jsonrpc && response.data.result) {
                        const result = JSON.parse(response.data.result);

                        if (result.status < 200 || result.status > 400) {
                            this.show_error = true;
                            this.error_text = result.data;

                            response.success = false;
                        }
                    }

                    return response;
                }
            });

            this.fetch_shop_type().then((data) => {
                let path = this.$route.path;

                if (path === '/' || path.substr(0, path.indexOf('?')) === '/' ) {
                    this.$route.router.replace(ShopType.get_index(data));
                }

                document.title = data.name;
            })
        },
        vuex: {
            getters: {
                header: state => state.header,
                shop: state => state.shop
            },
            actions
        },
        store,
        components: {
            XHeader,
            Alert,
            Loading
        },
        http: {
            root: '/vue/mshop',
        }
    }

</script>
